<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* div[class^="text"] {
				color: #00FFFF;
			}

			div[class$=film] {
				color: #C71585;
			}

			div[class*=aa] {
				color: aqua;
			}

			p:first-of-type {
				color: #FFFF00;
			}

			p:last-of-type {
				color: #0D7114;
			}

			p:only-of-type {
				color: #1F87CC;
			}

			p:only-child {
				color: #00FFFF;
			}

			p:nth-child(2) {
				background-color: #0000FF;
			} */

			/* p:nth-last-child(2) {
				background: #ff0000;
			}
			
			p:nth-of-type(2){
				background-color: #00FFFF;
			}
			
			p:nth-last-of-type(2){
				background-color: #B22222;
			} */

			p:last-child {
				background-color: #FFFF00;
			}

			/* :root{
				background-color: #C71585;
			} */

			:empty {
				width: 100px;
				height: 20px;
				background: #ff0000;
			}

			:target {
				border: 2px solid #D4D4D4;
				background-color: #e5eecc;
			}

			input[type="text"]:enabled {
				background-color: aqua;
			}

			input[type="text"]:disabled {
				background-color: #00FFFF;
			}

			input:checked {
				background-color: #D2691E;
			}

			p {
				color: #0000FF;
			}

			:not(p) {
				color: #00FFFF;
			}

			::selection {
				color: #00FFFF;
			}

			::-moz-selection {
				color: #C71585;
			}
		</style>
	</head>
	<body>
		<!-- [attribute^=value] -->
		<!-- <div class="first_text">第一个</div>
		<div class="text">第二个</div> -->

		<!-- [attribute$=value] -->
		<!-- <div class="films">第一个</div>
		<div class="onefilm">第二个</div> -->

		<!-- [attribute*=value] -->
		<!-- <div class="aaaaaa">变色</div> -->

		<!-- :first-of-type -->
		<!-- <p>这是第一个段落。</p>
		<p>这是第二个段落。</p> -->

		<!-- :last-of-type -->
		<!-- <p>这是第一个段落。</p>
		<p>这是第二个段落。</p> -->

		<!-- :only-of-type -->
		<!-- <div>
			<p>这是一个段落。</p>
		</div> -->

		<!-- <div>
			<p>这是一个段落。</p>
			<p>这是一个段落。</p>
		</div> -->

		<!-- :only-child -->
		<!-- <div>
			<p>这是一个段落。</p>
		</div> -->

		<!-- <div>
			<span>这是一个 span。</span>
			<p>这是一个段落。</p>
		</div> -->

		<!-- :nth-child() -->
		<!-- <h1>这是标题</h1>
		<p>第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<p>第四个段落。</p> -->

		<!-- :nth-last-child() -->
		<!-- <h1>这是标题</h1>
		<p>第一个段落。</p>
		<p>第二个段落。</p>
		<p>第三个段落。</p>
		<p>第四个段落。</p>
		<p>第五个段落。</p> -->

		<!-- :nth-of-type() -->
		<!-- <h1>这是标题</h1>
		 <p>第一个段落。</p>
		 <p>第二个段落。</p>
		 <p>第三个段落。</p>
		 <p>第四个段落。</p>
		 <p>第五个段落。</p> -->

		<!-- :nth-last-of-type() -->
		<!-- <h1>这是标题</h1>
		 <p>第一个段落。</p>
		 <p>第二个段落。</p>
		 <p>第三个段落。</p>
		 <p>第四个段落。</p>
		 <p>第五个段落。</p> -->

		<!-- :last-child -->
		<!-- <h1>这是标题</h1>
		 <p>第一个段落。</p>
		 <p>第二个段落。</p>
		 <p>第三个段落。</p>
		 <p>第四个段落。</p>
		 <p>第五个段落。</p> -->

		<!-- :root -->

		<!-- :empty -->
		<p></p>
		<p></p>

		<!-- :target -->
		<h1>这是标题</h1>

		<p><a href="#news1">跳转至内容 1</a></p>
		<p><a href="#news2">跳转至内容 2</a></p>

		<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

		<p id="news1"><b>内容 1...</b></p>
		<p id="news2"><b>内容 2...</b></p>

		<!-- :enabled -->
		<form action="">First name:<input type="text" value="Mickey" /><br />
			Last name: <input type="text" value="Mouse" /><br>
			Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
		</form>

		<!-- :disabled和上一个例子一样 -->

		<!-- :checked 只在 Opera 中正确地工作-->
		<form action="">
			<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
			<input type="radio" value="female" name="gender" /> Female<br>
			<input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
			<input type="checkbox" value="Car" /> I have a car
		</form>

		<!-- :not -->
		<h1>这是标题</h1>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<div>这是 div 元素中的文本。</div>
		<br>
		<a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a>

		<!-- ::selection -->
		<h1>请试着选取页面上的文本</h1>
		<p>这是一个段落。</p>
		<div>这是 div 元素中的文本。</div>
		<br>
		<a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a>
	</body>
</html>
